<template>
  <a-form class="inline-form">
    <a-row type="flex" :gutter="16">
      <a-col :span="8">
        <a-form-item label="门店名称">
          {{ storeData.name }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="门店编号">
          {{ storeData.storeId }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="服务商">
          {{ storeData.vendorName }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="联系人">
          {{ storeData.contactName }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="联系方式">
          {{ storeData.telephone }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="所在城市">
          {{ storeData.cityName }}
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="详细地址">
          {{ storeData.address }}
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item class="block" label="地址定位">
          <AddressComponent :is-modal-view="false" class="mt-12" ref="map" height="300px" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item class="block" label="经营执照与门头照片">
          <PreviewImage v-if="storeData.imgUrl" class="mt-12" v-model="storeData.imgUrl.split(',')" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item class="block" label="服务商备注">
          <section class="mt-12">{{ storeData.auditRemark }}</section>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { get } from 'lodash'
import AddressComponent from './Address'
export default {
  name: 'StoreInfo',
  props: {
    storeData: {
      type: Object,
      required: true,
    },
  },
  components: { AddressComponent },
  data() {
    return {
      transmissionTypeEnums: [],
      vehicleSourceEnums: [],
      vehicleColorTypeEnums: [],
      vehicleConfigEnums: [],
    }
  },
  computed: {
    carDesc() {},
    vehicleConfigNames() {
      return this.vehicleConfigEnums
        .filter((item) =>
          this.storeData.vehicleConfigs
            .split(',')
            .filter((e) => e)
            .includes(`${item.value}`)
        )
        .map((e) => e.name)
        .join(',')
    },
    liabilityInsuranceArr() {
      return [this.liabilityInsuranceDriver, this.liabilityInsurancePassenger]
    },
  },
  async created() {
    this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
    this.vehicleSourceEnums = await this.$utils.getDictList('VehicleSource')
    this.vehicleConfigEnums = await this.$utils.getDictList('VehicleConfig')
    this.vehicleColorTypeEnums = await this.$utils.getDictList('VehicleColorType')
  },
  mounted() {
    this.$watch(
      'storeData',
      (data) => {
        data && this.$refs.map.setMapPoint(data)
        // data && this.$refs.map.getAddressValue({longitude: 110.4, latitude: 39, address: '火葬场', type: 2})
      },
      { immediate: true }
    )
  },
  methods: {},
}
</script>
<style lang="less" scoped>
@import './info';

.title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
}

.block {
  display: block !important;

  /deep/ .ant-form-item-label {
    width: auto;
  }
}
</style>
